    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                background: url("images/4.jpg") no-repeat;
            }
            .box{
                text-align: center;
                background: rgba(255,255,255,0.2);
                margin-top: 20px;
            }
            .box img{
                width: 300px;
                height: 200px;
                padding: 0;
                border:2px solid #990000;
                margin: 10px;
            }
        </style>
    </head>
    <body>
     <div class="box">
         <img src="images/1.jpg" alt="">
         <img src="images/2.jpg" alt="">
         <img src="images/3.jpg" alt="">
         <img src="images/4.jpg" alt="">
     </div>
     <script>
         var bodyArr=document.getElementsByTagName("body")[0];
         var box=bodyArr.getElementsByClassName("box")[0];
         var img=box.children;
         for(var i=0;i<img.length;i++){
             img[i].index=i;
             img[i].onclick=function () {
                 alert("1");
                 //bodyArr.style.background="url(images/"+(this.index+1)+".jpg)";
                 bodyArr.style.background="url("+this.src+")";
             }
         }
     </script>
    </body>
    </html>